<template>
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
      <div class="logo">
        <h3 v-if="!isCollapse">派单管理系统</h3>
        <h3 v-else>派单</h3>
      </div>
      
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :unique-opened="true"
        router
        class="sidebar-menu"
      >
        <el-menu-item index="/dashboard">
          <el-icon><Odometer /></el-icon>
          <template #title>仪表板</template>
        </el-menu-item>
        
        <el-sub-menu index="work-orders">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>工单管理</span>
          </template>
          <el-menu-item index="/work-orders/create">新建工单</el-menu-item>
          <el-menu-item index="/work-orders/pending">待办查询</el-menu-item>
          <el-menu-item index="/work-orders/completed">已办查询</el-menu-item>
          <el-menu-item index="/work-orders/reports">工单报表</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="inventory">
          <template #title>
            <el-icon><Box /></el-icon>
            <span>库存管理</span>
          </template>
          <el-menu-item index="/inventory/materials">材料库存管理</el-menu-item>
          <el-menu-item index="/inventory/usage">使用清单</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="management" v-if="authStore.isAdmin || authStore.isManager">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/users" v-if="authStore.isAdmin">用户管理</el-menu-item>
          <el-menu-item index="/areas" v-if="authStore.isAdmin">区域管理</el-menu-item>
          <el-menu-item index="/work-order-config" v-if="authStore.isAdmin || authStore.isManager">工单配置</el-menu-item>
          <el-menu-item index="/system/permissions" v-if="authStore.isAdmin">权限管理</el-menu-item>
          <el-menu-item index="/system/config" v-if="authStore.isAdmin">系统配置</el-menu-item>
          <el-menu-item index="/system/material-categories" v-if="authStore.isAdmin">物料分类</el-menu-item>
          <el-menu-item index="/system/form-templates" v-if="authStore.isAdmin">表单模板</el-menu-item>
        </el-sub-menu>

        <!-- 开发环境下的样式测试页面 -->
        <el-menu-item index="/style-test" v-if="isDev">
          <el-icon><Tools /></el-icon>
          <template #title>样式测试</template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="header">
        <div class="header-left">
          <el-button
            :icon="isCollapse ? Expand : Fold"
            @click="toggleCollapse"
            text
          />
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="item in breadcrumbs"
              :key="item.path"
              :to="item.path"
            >
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <el-avatar :size="32" :icon="UserFilled" />
              <span class="username">{{ authStore.user?.name || '用户' }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="settings">设置</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容 -->
      <el-main class="main-content">
        <slot />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Fold,
  Expand,
  Odometer,
  Document,
  Setting,
  Tools,
  UserFilled,
  ArrowDown,
  Box
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const isCollapse = ref(false)
const isDev = import.meta.env.DEV

// 当前激活的菜单项
const activeMenu = computed(() => {
  const path = route.path
  if (path.startsWith('/work-orders')) {
    return path
  }
  return path
})

// 面包屑导航
const breadcrumbs = computed(() => {
  const path = route.path
  const breadcrumbMap: Record<string, { title: string; path: string }[]> = {
    '/dashboard': [{ title: '仪表板', path: '/dashboard' }],
    '/work-orders': [{ title: '工单管理', path: '/work-orders' }],
    '/work-orders/create': [
      { title: '工单管理', path: '/work-orders' },
      { title: '新建工单', path: '/work-orders/create' }
    ],
    '/work-orders/pending': [
      { title: '工单管理', path: '/work-orders' },
      { title: '待办查询', path: '/work-orders/pending' }
    ],
    '/work-orders/completed': [
      { title: '工单管理', path: '/work-orders' },
      { title: '已办查询', path: '/work-orders/completed' }
    ],
    '/work-orders/reports': [
      { title: '工单管理', path: '/work-orders' },
      { title: '工单报表', path: '/work-orders/reports' }
    ],
    '/inventory/materials': [
      { title: '库存管理', path: '/inventory' },
      { title: '材料库存管理', path: '/inventory/materials' }
    ],
    '/inventory/usage': [
      { title: '库存管理', path: '/inventory' },
      { title: '使用清单', path: '/inventory/usage' }
    ],
    '/users': [{ title: '用户管理', path: '/users' }],
    '/areas': [{ title: '区域管理', path: '/areas' }],
    '/work-order-config': [{ title: '工单配置', path: '/work-order-config' }],
    '/system/permissions': [
      { title: '系统管理', path: '/system' },
      { title: '权限管理', path: '/system/permissions' }
    ],
    '/system/config': [
      { title: '系统管理', path: '/system' },
      { title: '系统配置', path: '/system/config' }
    ],
    '/system/material-categories': [
      { title: '系统管理', path: '/system' },
      { title: '物料分类', path: '/system/material-categories' }
    ],
    '/system/form-templates': [
      { title: '系统管理', path: '/system' },
      { title: '表单模板', path: '/system/form-templates' }
    ]
  }

  // 处理工单详情页面
  if (path.match(/^\/work-orders\/\d+$/)) {
    return [
      { title: '工单管理', path: '/work-orders' },
      { title: '工单详情', path: path }
    ]
  }

  // 处理工单编辑页面
  if (path.match(/^\/work-orders\/\d+\/edit$/)) {
    return [
      { title: '工单管理', path: '/work-orders' },
      { title: '编辑工单', path: path }
    ]
  }

  return breadcrumbMap[path] || [{ title: '首页', path: '/' }]
})

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/settings')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      authStore.logout()
      ElMessage.success('已退出登录')
      router.push('/login')
      break
  }
}

// 监听路由变化，自动收起移动端侧边栏
watch(route, () => {
  if (window.innerWidth <= 768) {
    isCollapse.value = true
  }
})
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.sidebar {
  background-color: #304156;
  transition: width 0.3s;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b3a4b;
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.sidebar-menu {
  border-right: none;
  background-color: #304156;
}

.sidebar-menu :deep(.el-menu-item) {
  color: #bfcbd9;
}

.sidebar-menu :deep(.el-menu-item:hover) {
  background-color: #263445;
  color: #409eff;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  background-color: #409eff;
  color: white;
}

.sidebar-menu :deep(.el-sub-menu__title) {
  color: #bfcbd9;
}

.sidebar-menu :deep(.el-sub-menu__title:hover) {
  background-color: #263445;
  color: #409eff;
}

.header {
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.username {
  font-size: 14px;
  color: #333;
}

.main-content {
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
  max-width: 100%;
}

/* 内容容器样式 */
.main-content :deep(.page-container) {
  max-width: none;
  margin: 0;
  width: 100%;
  padding: 0 20px;
}

.main-content :deep(.page-header) {
  margin-bottom: 20px;
}

.main-content :deep(.page-header h2) {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content :deep(.page-container) {
    max-width: 100%;
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 1000;
    height: 100vh;
  }

  .header-left .el-breadcrumb {
    display: none;
  }

  .main-content {
    padding: 10px;
  }

  .main-content :deep(.page-container) {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 0 10px;
  }

  .header-left {
    gap: 10px;
  }

  .main-content {
    padding: 5px;
  }
}
</style>
